<template>
  <div class="user">
    <!--div class="allbutton" style="width: 80%">
      <el-button type="primary" @click="addmodel">新增</el-button>
    </div-->
    <div class="allbutton" style="width:80%;border:1px solid white;margin-top:20px">
      <el-button style="display:inline-block;position:absolute" type="primary" @click="addmodel">新增</el-button>
      <el-input style="margin-left:150px;display:inline-block;position:absolute" v-model="search_name" placeholder="搜索书名"></el-input>
      <el-button style="margin-left:350px;display:inline-block;position:absolute" type="primary" @click="searchBook">搜索</el-button>
    </div>
    <div class="biaoge">
      <el-table
        :data="tableData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        height="450"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="cate" label="类目" width="120" sortable></el-table-column>
        <el-table-column prop="name" label="书名" width="120" sortable></el-table-column>
        <el-table-column prop="author" label="作者" width="150"></el-table-column>
        <el-table-column prop="detail" label="详情" width="200"></el-table-column>
        <el-table-column prop="price" label="价格" width="150"></el-table-column>
        <el-table-column prop="cover" label="封面">
            <template slot-scope="scope">
              <el-image fit="fill" :src="scope.row.cover" style="width: 100px"></el-image>
            </template>
          </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="deldata(scope.row)">删除</el-button>
            <el-button type="primary" @click="editmodel(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  
    <el-dialog
      title="新增书籍"
      :visible.sync="dialogVisibleadd"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
    >
      <el-form :inline="true" :model="add" :rules="rules" ref="addruleForm">
        <el-form-item label="封面" prop="bookavatar" label-width="100px">
          <el-upload
            class="avatar-uploader"
            :action="`${this.$store.state.url}/avatar`"
            name="bookavatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="avatar" :src="avatar" class="avatar" alt="" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类目" prop="cate" label-width="100px">
          <!--el-input v-model="add.cate"></el-input-->
          <el-select v-model="add.cate" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in cates"
                    :key="index"
                    :label="item.name"
                    :value="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="书名" prop="name" label-width="100px">
          <el-input v-model="add.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author" label-width="100px">
          <el-input v-model="add.author"></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="author" label-width="100px">
          <el-input v-model="add.detail"></el-input>
        </el-form-item>

        <el-form-item label="价格" prop="price" label-width="100px">
          <el-input v-model="add.price"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureadd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户 -->
    <el-dialog
      title="修改书籍"
      :visible.sync="dialogVisibleedit"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
    >
      <el-form :inline="true" :model="edit" :rules="rules" ref="editruleForm">
        <el-form-item label="封面" prop="bookavatar" label-width="100px">
          <el-upload
            class="avatar-uploader"
            :action="`${this.$store.state.url}/avatar`"
            name="bookavatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="avatar" :src="avatar" class="avatar" alt="" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类目" prop="cate" label-width="100px">
          <!--el-input v-model="add.cate"></el-input-->
          <el-select v-model="edit.cate" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in cates"
                    :key="index"
                    :label="item.name"
                    :value="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="书名" prop="name" label-width="100px">
          <el-input v-model="edit.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author" label-width="100px">
          <el-input v-model="edit.author"></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="author" label-width="100px">
          <el-input v-model="edit.detail"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price" label-width="100px">
          <el-input v-model="edit.price"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureedit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      avatar: "",
      add: {
        cate: "",
        name: "",
        author: "",
        detail: "",
        price: "",
        cover:""
      },
      search_name: "",
      edit: { userId: 0,cover:"" },
      dialogVisibleedit: false,
      dialogVisibleadd: false,
      rules: {
        cate: [{ required: true, message: "请输入书名", trigger: "blur" }],
        name: [{ required: true, message: "请输入书名", trigger: "blur" }],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
      },
      cates: []
    };
  },
  created() {
    this.getData();
    this.getCates()
  },
  methods: {
    getData() {
      this.$axios.get(this.$store.state.url+"/book").then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.results;
        }
      });
    },
    getCates() {
      this.$axios.get(this.$store.state.url+'/cate/cates').then((res) => {
        if (res.status === 200) {
          this.cates = res.data.results.filter(i => i.level == 2).map(i => {
            return { name: i.cateName }
          });
        }
      });
    },
    //对话框取消
    quxiao() {
      this.dialogVisibleadd = false;
      this.dialogVisibleedit = false;
    },
    //点开新增对话框
    addmodel() {
      this.dialogVisibleadd = true;
      if (this.$refs["addruleForm"]) {
        this.$refs["addruleForm"].resetFields();
      }
      this.add.cover = "";
    },
    //确认新增
    sureadd() {
      this.$refs["addruleForm"].validate((valid) => {
        if (valid) {
          this.$axios.post(this.$store.state.url+"/book/addbook", this.add).then((res) => {
            if (res.data.status === 200) {
              this.getData();
              this.dialogVisibleadd = false;
              this.$message.success("添加成功");
            }
          });
        } else {
          this.$message.error("添加失败");
          return false;
        }
      });
    },
    //点开修改对话框
    editmodel(edit) {
      this.edit.cover = "";
      this.edit.bookId = edit.bid;
      if (edit) {
        this.dialogVisibleedit = true;
      } else {
        //提示不让修改
        this.$message.error("请选择一条数据进行修改");
      }
      if (this.$refs["editruleForm"]) {
        this.$refs["editruleForm"].resetFields();
      }
    },
    //确定修改
    sureedit() {
      this.$refs["editruleForm"].validate((valid) => {
        if (valid) {
          this.$axios
            .post(this.$store.state.url+"/updatebook", this.edit, this.bookId)
            .then((res) => {
              if (res.status === 200) {
                this.getData();
                this.dialogVisibleedit = false;
                this.$message.success("修改成功");
              } else {
                this.$message({
                  showClose: false,
                  message: res.data.msg,
                  type: "error",
                });
              }
            });
        } else {
          this.$message.error("修改失败");
          return false;
        }
      });
    },
    //删除
    deldata(del) {
      let { bid } = del;
      if (del) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .get(this.$store.state.url+"/deletebook/?bid=" + bid)
              .then((res) => {
                if (res.data.status === 200) {
                  this.getData();
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                } else {
                  this.$message({
                    showClose: false,
                    message: res.data.msg,
                    type: "error",
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message.error("请选择一条数据进行删除");
      }
    },
    handleAvatarSuccess(rs) {
      // console.log(rs);
      // console.log("上传成功", rs.data.imgList[0]);
      this.avatar = rs.data.imgList[0];
      this.add.cover = rs.data.imgList[0]
      this.edit.cover = rs.data.imgList[0]
    },
    searchBook() {
      this.$axios.get(this.$store.state.url+"/bookByName?name=" + this.search_name).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.results;
        }
      });
    }
  },
};
</script>

<style scoped>
.biaoge {
  margin-top: 30px;
}
.block {
  float: right !important;
}
/* 图片上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  left: 50px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px !important;
  text-align: center;
}
.el-icon-plus:after {
  display: block;
  content: "请选择封面";
  font-size: 10px;
  margin-top: -100px;
}
.avatar-uploader .el-upload {
  width: 150px;
  height: 150px;
}
.avatar-uploader .el-upload img {
  width: 100%;
  height: 100%;
}
</style>

<style>
.user .el-input__inner {
  width: 200px !important;
}
.el-pagination .el-select .el-input .el-input__inner {
  padding-right: 25px;
  border-radius: 3px;
  width: 100px !important;
}
.el-pagination__editor.el-input .el-input__inner {
  width: 40px !important;
}
</style>
